<template>
	<view>
		<cu-custom :isBack="true">
			<block slot="backText"></block>
		</cu-custom>
		<view>
			<view v-for="(item,index) in articleList" :key="index" class="bg-white light text-gray"
				style="border-radius: 10rpx;margin:30rpx;padding: 30rpx;">
				<view class="flex justify-between">
					<view>
						<view class="text-gray text-sm flex">
							<view class="text-cut">
								<text class="cuIcon-service margin-right"
									style="font-size: 40rpx;"></text>{{item.problem}}
							</view>
						</view>

					</view>
					<view>
						<view class="text-grey text-xs">{{formatWorkOrderStatus(item.status)}}</view>
					</view>
				</view>
				<view class="flex justify-between margin-top">
					{{formatDateTime(item.updateDate)}}
					<view :style="[{color:themeConfig.primaryColor}]">
						<text class="cuIcon-mark margin-right-lg" style="font-size: 40rpx;"
							@tap="gotoChat(item)"></text>
						<text class="cuIcon-more margin-right-lg" style="font-size: 40rpx;"
							@tap="gotoInfo(item)"></text>
						<text class="cuIcon-delete" style="font-size: 40rpx;" @tap="del(item)"></text>
					</view>
				</view>
			</view>
		</view>

		<view @tap="gotoCreated" class="flex align-center justify-center text-sm text-white"
			:style="{backgroundColor:themeConfig.primaryColor}"
			style="width: 80rpx;height: 80rpx;border-radius: 50%;position:fixed !important;z-index: 1024;right:40rpx;bottom: 80rpx">
			<text class="cuIcon-add" style="font-size: 35rpx;line-height: 80rpx;"></text>
		</view>
	</view>
</template>

<script>
	import {
		showModal
	} from '@/util/toast.js'
	import {formatDateTime} from '@/util/formatTime.js'
	import * as erpWorkOrderApi from '@/api/erp/erpWorkOrderApi.js'
	import {
		listWorkOrderStatus,
		formatWorkOrderStatus
	} from '@/util/utils.js'
	import * as storage from '@/util/storage.js'
	export default {
		data() {
			return {
				articleList: [],
				userId: storage.getUserId(),
				statusList: []
			}
		},
		computed: {
			themeConfig() {
				return this.$store.state.themeConfig
			}
		},
		onLoad() {
			this.statusList = listWorkOrderStatus(this)
			this.pageGetWorkOrder()
		},
		methods: {
			formatWorkOrderStatus(status) {
				return formatWorkOrderStatus(this, status)
			},
			gotoCreated() {
				uni.navigateTo({
					url: `/pages/workOrderCreated/workOrderCreated`
				})
			},
			del(item) {
				showModal(this.$t('delete'), item.problem, true, this.$t('confirm'), this.$t('cancel'), (
					res) => {
					erpWorkOrderApi.deleteWorkOrder({
						workOrderId: item.workOrderId
					}).then(() => {
						this.pageGetWorkOrder()
					})
				}, (res) => {
					return
				})
			},
			gotoChat(item) {
				uni.navigateTo({
					url: `/pages/workOrderChat/workOrderChat?workOrderId=${item.workOrderId}&keyName=${item.keyName}`
				})
			},
			gotoInfo(item) {
				uni.navigateTo({
					url: `/pages/workOrderInfo/workOrderInfo?workOrderId=${item.workOrderId}&keyName=${item.keyName}`
				})
			},
			formatDateTime(timestamp) {
				return formatDateTime(timestamp, this.$t('unKnow'))
			},
			pageGetWorkOrder() {
				erpWorkOrderApi.pageGetWorkOrder({
					pageSize: 200,
					currentPage: 1,
					createdUserId: this.userId
				}).then(res => {
					const {
						data
					} = res
					if (data) {
						this.articleList = data.data
					}
				})
			}
		}
	}
</script>

<style>

</style>
